﻿@{
    ViewBag.Title = "产品管理";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<script src="~/Scripts/ajexfileupload/ajaxfileupload.js"></script>
<table id="datalist" class="easyui-datagrid" style="top: 35px; width: auto; height: 630px;"
    data-options="rownumbers:true,singleSelect:true,toolbar:'#tb',url:'/Admin/GetProducts',pagination:true,pageSize:20">
    <thead>
        <tr>
            <th data-options="field:'CategoryName',width:80">中文分类</th>
            <th data-options="field:'CategoryNameEn',width:80">英文分类</th>
            <th data-options="field:'Title',width:300">中文标题</th>
            <th data-options="field:'TitleEn',width:300">英文标题</th>
            <th data-options="field:'CreationDateString',width:100">更新时间</th>
        </tr>
    </thead>
</table>
<div id="tb" style="padding: 5px; height: auto">
    <div>
        关键词:
        <input class="easyui-textbox" name="keyword" id="keyword" />
        发布时间 从:
            <input id="datestart" class="easyui-datebox" type="text" style="width: 90px;" readonly="readonly">
        到:
            <input id="dateend" class="easyui-datebox" type="text" style="width: 90px" readonly="readonly">
        <a href="javascript:void(0);" onclick="model.search();" class="easyui-linkbutton" iconcls="icon-search">搜索</a>
        <a href="javascript:void(0);" onclick="model.reset();" class="easyui-linkbutton">重置</a>
    </div>
    <div>
        <a href="javascript:void(0);" onclick="model.add();" class="easyui-linkbutton" iconcls="icon-add" plain="true">新增</a>
        <a href="javascript:void(0);" onclick="model.update();" class="easyui-linkbutton" iconcls="icon-edit" plain="true">修改</a>
        <a href="javascript:void(0);" onclick="model.del();" class="easyui-linkbutton" iconcls="icon-remove" plain="true">删除</a>
    </div>
</div>
<div id="modelWindow" class="easyui-window" title="产品管理" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width: 600px; height: 600px; padding: 10px;">
    <form id="modelform" method="post" action="/Admin/Product">
        <input type="hidden" name="Id" id="Id" value="0" />
        <table>
            <tr>
                <td class="flabel">产品中文标题:</td>
                <td style="width: 400px;">
                    <input class="easyui-validatebox f600" style="width: 260px;" type="text" name="Title" data-options="required:true" /></td>
            </tr>
            <tr>
                <td class="flabel">产品英文标题:</td>
                <td>
                    <input class="easyui-validatebox f600" style="width: 260px;" type="text" name="TitleEn" data-options="required:true" /></td>
            </tr>
            <tr>
                <td class="flabel">首页显示:</td>
                <td>
                    @Html.CheckBox("IndexShow")
                </td>
            </tr>
            <tr>
                <td class="flabel">分类:</td>
                <td>
                    @Html.DropDownList("CategoryId", new SelectList(Qcy.Jshj.Web.Models.ProductCategory.All, "Id", "FullName"))
                </td>
            </tr>
            <tr>
                <td class="flabel">产品图片:</td>
                <td>
                    <input type="file" name="file1" id="file1" />
                    <input type="hidden" name="Pictures" id="picturesField" />
                    <input type="button" value="上传" onclick="upload.uploadFile('file1')" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <style>
                        #pictures ul li { list-style: none; position: relative; }
                            #pictures ul li a { position: absolute; color: #f00; bottom: 5px; left: 0; }
                    </style>
                    <div id="pictures" style="display: none;">
                        <ul></ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="flabel">中文说明:</td>
                <td>
                    <textarea name="Contents" rows="4" style="width: 100%; height: 100px;" class="f600"></textarea>
                </td>
            </tr>
            <tr>
                <td class="flabel">英文说明:</td>
                <td>
                    <textarea name="ContentsEn" rows="4" style="width: 100%; height: 100px;" class="f600"></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: right;">
                    <hr />
                    <input type="submit" value="提交" /></td>
            </tr>
        </table>
    </form>
</div>
<script type="text/javascript">
    $(function () {
        $('#modelform').form({
            success: function (data) {
                data = eval("(" + data + ")");
                $.messager.alert('提交结果', data.msg, 'info', function () {
                    model.load();
                    model.hideform();
                    model.resetform();
                });
            }
        });
    });

    var model = {
        add: function () { this.showform(); },
        update: function () {
            var selected = this.selected()
            if (selected != null) {
                this.showform();
                $.get('/Admin/GetProduct/' + selected.Id, function (data) {
                    $('#modelform').form('load', data);
                    if (data.IndexShow)
                        $("#IndexShow").attr("checked", "checked");
                    $('#CategoryId').val(data.Category.Id);
                    $('#picturesField').val(data.Pictures);
                    var pics = data.Pictures.split(',');
                    $('#pictures ul').empty();
                    for (var i = 0; i < pics.length; i++) {
                        if (pics[i])
                            $('#pictures ul').append('<li><img src="' + pics[i] + '" height="100"/><a href="javascript:void(0);" onclick="delPictures(\'' + pics[i] + '\');">删除</a></li>');
                    }
                    $('#pictures').show();
                });
            } else {
                alert("请先选择一个产品");
            }
        },
        del: function () {
            var row = this.selected();
            if (row == null) {
                alert("请至少选择一个产品")
                return false;
            }
            $.messager.confirm('删除确认', '确定要删除"' + row.Title + '"吗?', function (r) {
                if (r) {
                    $.post("/Admin/DeleteProduct/" + row.Id, function (data) {
                        $.messager.alert('消息', '' + data.msg + '', 'info', function () {
                            model.load();
                        });
                    }, "JSON")
                }
            });
        },
        showform: function () {
            $("#modelWindow").window("open");
        },
        hideform: function () {
            $("#modelWindow").window("close");
        },
        resetform: function () {
            $("#modelform")[0].reset();
            $('#picturesField').val("");
            $("#IndexShow").removeAttr("checked");
            $('#pictures ul').empty();
            $('#pictures').hidden();
        },
        load: function () {
            $('#datalist').datagrid('load', {
                keyword: $('#keyword').val(),
                datestart: $('#datestart').datebox('getValue'),
                dateend: $('#dateend').datebox('getValue')
            });
        },
        search: function () { this.load() },
        selected: function () {
            return $('#datalist').datagrid('getSelected');
        },
        reset: function () {
            $('#keyword').val("");
            $('#datestart').datebox('setValue', '');
            $('#dateend').datebox('setValue', '');
            this.load();
        }
    };

    var upload = {
        uploadFile: function (eid) {
            $.ajaxFileUpload({
                url: '/Admin/Upload/Product',
                secureuri: false,
                fileElementId: eid,
                dataType: 'json',
                beforeSend: function () {
                    $("#loading").show();
                },
                complete: function () {
                    $("#loading").hide();
                },
                success: function (data, status) {
                    if (data.success) {
                        $('#picturesField').val($('#picturesField').val() + "," + data.filename);
                        $('#pictures ul').append('<li><img src="' + data.filename + '" height="100"/><a href="javascript:void(0);" onclick="upload.deleteFile(\'' + data.filename + '\');">删除</a></li>');
                        $('#pictures').show();
                    } else {
                        alert('上传失败');
                    }
                },
                error: function (data, status, e) {
                    alert(e);
                }
            });
            return false;
        },
        deleteFile: function (file) {
            if (confirm("确定要删除这张图片吗?")) {
                $('#picturesField').val($('#picturesField').val().replace(file, '').replace(',,', ','));
                $('#pictures ul li img[src=\'' + file + '\']').parent('li').remove();
            }
        }
    }

</script>
